<template>
  <div class="goodparam">
    <div v-for="item in goodsParam.sizes" class="detail">
      <div v-for="key in item" class="size">
        {{ key }}
      </div>
    </div>
    <div v-for="item in goodsParam.infos" class="pa" @click="getsize()">
      <div class="key">{{ item.key }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailGoodParam",
  props: {
    goodsParam: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
    };
  },
  methods:{
   
  }
};
</script>

<style lang="css" scoped>
.goodparam{
  border-bottom: 5px solid #F2F5F8;
}
.detail {
  display: flex;
  flex-direction: row;
  height: 45px;
  line-height: 45px;
  justify-content: center;
  text-align: center;
}
.size {
  flex: 1;
}
.pa {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.pa > div {
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}
.key {
  flex: 1;
}
.value {
  flex: 3;
  color: #eb4868;
}
</style>